<template>
  <view class="container">
    <!-- Logo区域 -->
    <view class="logo-area">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="title">中医馆</text>
    </view>

    <!-- 登录表单 -->
    <view class="login-form">
      <!-- 手机号输入 -->
      <view class="input-group">
        <view class="input-label">手机号</view>
        <view class="input-box">
          <text class="prefix">+86</text>
          <input
            type="number"
            v-model="phone"
            maxlength="11"
            placeholder="请输入手机号"
            @input="handlePhoneInput"
          />
        </view>
      </view>

      <!-- 验证码输入 -->
      <view class="input-group">
        <view class="input-label">验证码</view>
        <view class="input-box code">
          <input
            type="number"
            v-model="code"
            maxlength="6"
            placeholder="请输入验证码"
          />
          <button
            class="code-btn"
            :disabled="!canSendCode || counting"
            @click="sendCode"
          >
            {{ counting ? `${countdown}s后重新获取` : "获取验证码" }}
          </button>
        </view>
      </view>

      <!-- 登录按钮 -->
      <button class="login-btn" :disabled="!canLogin" @click="handleLogin">
        登录
      </button>

      <!-- 用户协议 -->
      <view class="agreement">
        <checkbox-group @change="handleAgreementChange">
          <label>
            <checkbox :checked="agreed" color="#007AFF" />
            <text>我已阅读并同意</text>
          </label>
        </checkbox-group>
        <text class="link" @click="showAgreement">《用户协议》</text>
        <text>和</text>
        <text class="link" @click="showPrivacy">《隐私政策》</text>
      </view>
    </view>

    <!-- 其他登录方式 -->
    <view class="other-login">
      <view class="divider">
        <view class="line"></view>
        <text>其他登录方式</text>
        <view class="line"></view>
      </view>
      <view class="login-methods">
        <view class="method-item" @click="handleWechatLogin">
          <image src="/static/icons/wechat.png" mode="aspectFit"></image>
          <text>微信登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      code: "",
      agreed: false,
      counting: false,
      countdown: 60,
      timer: null,
    };
  },
  computed: {
    canSendCode() {
      return this.phone.length === 11 && this.agreed;
    },
    canLogin() {
      return this.phone.length === 11 && this.code.length === 6 && this.agreed;
    },
  },
  methods: {
    handlePhoneInput(e) {
      // 限制只能输入数字
      this.phone = e.detail.value.replace(/\D/g, "");
    },
    async sendCode() {
      if (!this.canSendCode || this.counting) return;

      try {
        // 这里应该调用发送验证码的接口
        // await this.$api.sendCode(this.phone);

        // 开始倒计时
        this.counting = true;
        this.countdown = 60;
        this.timer = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown--;
          } else {
            this.counting = false;
            clearInterval(this.timer);
          }
        }, 1000);

        uni.showToast({
          title: "验证码已发送",
          icon: "success",
        });
      } catch (e) {
        uni.showToast({
          title: "发送失败，请重试",
          icon: "none",
        });
      }
    },
    async handleLogin() {
      if (!this.canLogin) return;

      try {
        // 这里应该调用登录接口
        // const res = await this.$api.login({
        //     phone: this.phone,
        //     code: this.code
        // });

        // 模拟登录成功
        uni.showToast({
          title: "登录成功",
          icon: "success",
        });

        // 存储用户信息
        // uni.setStorageSync('token', res.token);
        // uni.setStorageSync('userInfo', res.userInfo);

        // 延迟跳转，让用户看到成功提示
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/index/index",
          });
        }, 1500);
      } catch (e) {
        uni.showToast({
          title: "登录失败，请重试",
          icon: "none",
        });
      }
    },
    handleAgreementChange(e) {
      this.agreed = e.detail.value.length > 0;
    },
    showAgreement() {
      // 跳转到用户协议页面
      uni.navigateTo({
        url: "/pages/agreement/agreement",
      });
    },
    showPrivacy() {
      // 跳转到隐私政策页面
      uni.navigateTo({
        url: "/pages/privacy/privacy",
      });
    },
    handleWechatLogin() {
      // 微信登录逻辑
      uni.showToast({
        title: "暂未开放",
        icon: "none",
      });
    },
  },
  onUnload() {
    // 页面卸载时清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #fff;
  padding: 60rpx 40rpx;
}

.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;

  .logo {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 20rpx;
  }

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.login-form {
  .input-group {
    margin-bottom: 40rpx;

    .input-label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
    }

    .input-box {
      display: flex;
      align-items: center;
      height: 88rpx;
      background-color: #f8f8f8;
      border-radius: 44rpx;
      padding: 0 30rpx;

      .prefix {
        font-size: 28rpx;
        color: #333;
        margin-right: 20rpx;
      }

      input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
      }

      &.code {
        padding-right: 10rpx;

        .code-btn {
          width: 200rpx;
          height: 68rpx;
          line-height: 68rpx;
          font-size: 24rpx;
          color: #007aff;
          background: none;
          padding: 0;

          &[disabled] {
            color: #999;
          }

          &::after {
            display: none;
          }
        }
      }
    }
  }

  .login-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background-color: #007aff;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    margin: 60rpx 0;

    &[disabled] {
      background-color: #b2d4ff;
    }
  }

  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #666;

    checkbox {
      transform: scale(0.7);
    }

    .link {
      color: #007aff;
      margin: 0 4rpx;
    }
  }
}

.other-login {
  margin-top: 100rpx;

  .divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60rpx;

    .line {
      width: 100rpx;
      height: 1rpx;
      background-color: #e5e5e5;
    }

    text {
      color: #999;
      font-size: 24rpx;
      margin: 0 20rpx;
    }
  }

  .login-methods {
    display: flex;
    justify-content: center;

    .method-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 20rpx;
      }

      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}
</style> 